<template>
  <div class="main">
    <div class="video-play-wrapper" v-show="showPage">
      <div class="video-play">
        <video-player class="video-player vjs-custom-skin" :playsinline="true" ref="videoPlayer" :options="playerOptions"></video-player>
        <!-- <video :src="videoSrc"></video> -->

        <!-- <div class="videoArea">
          <video id="v3" :src="videoSrc" controls="controls" style="width: 100%; border-radius: 0.1rem; object-fit：fill; position: relative; top: 0; left: 0;" />
          <div :style="bgStyle" class="controlBtn" @click="handlePlayVideo"><img v-show="!videoPlay" src="~/static/playBtn.png" alt=""></div>
        </div> -->
        <!-- <video id="v3" :src="pathDetail.videoIntroduce" style="width: 6.86rem; border-radius: 0.1rem; object-fit：fill; position: relative; top: 0; left: 0;" /> -->
        <i class="right" v-show="showBackArrow" @click="$router.back()"></i>
      </div>
      <scrollerEdit ref="scrollerBottom" lock-x :bounce="false">
        <div class="content">
          <div class="share" @click="openShare" v-show="showShareIcon">
            <b>分享</b>
            <img src="~@/static/images/shareBlack.png" alt />
          </div>
          <h2>课程目录</h2>
          <div class="mulu" v-for="(item, index) in lessonsVOList" :key="item.id" @click="playVideo(index)">
            <span :class="['title', currentIndex === index ? 'colorIndex' : '']">
              <i>0{{ index + 1 }}</i>
              <b>{{ item.lessonTopic }}</b>
            </span>
            <span class="times">
              <i>{{ new Date(item.teachingStartTime).format('yyyy-MM-dd hh:mm') }}</i>
            </span>
          </div>
          <div style="height:1rem"></div>
        </div>
      </scrollerEdit>
    </div>
  </div>
</template>
<script>
import scrollerEdit from '~/components/scrollerEdit'
import { info } from '~/api/identity'
import { showShare } from '~/components/share/index'
import { videoPlayer } from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
import wxapi from '~/plugins/wxapi.js'
import { format } from '~/plugins/filter'
export default {
  components: {
    scrollerEdit,
    videoPlayer,
  },
  data() {
    return {
      bgStyle: '',
      videoPlay: false,
      showPage: false,
      showBackArrow: true,
      currentIndex: null,
      tabIndex: 1,
      lessonsVOList: [],
      videoSrc: '',
      hideHeader: false,
      showShareIcon: true,
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: 'video/mp4',
            src: '', //url地址
          },
        ],
        poster: '', //你的封面地址
        // width: document.documentElement.clientWidth,
        notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, //全屏按钮
        },
      },
    }
  },
  created() {
    if (this.commonJs.GetUrlParam('isVip')) {
      window.location.replace(process.env.workUrl + '/wx-yxk/#/home')
      return false
    }
    if (this.commonJs.GetUrlParam('shareVideo') || this.commonJs.GetUrlParam('mini_token')) {
      this.showBackArrow = false
    }
    if (this.commonJs.GetUrlParam('mini_token')) {
      this.showShareIcon = false
    }
  },
  mounted: function() {
    // this.getVideoData();
    this.$visit('VideoCoursePlay/' + this.commonJs.GetUrlParam('id'))
    wxapi.wxRegister()
    this.info()
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player
    },
  },
  methods: {
    handlePlayVideo() {
      if (!this.videoPlay) {
        this.bgStyle = ''
        v3.play()
        this.videoPlay = true
      } else {
        v3.pause()
        this.videoPlay = false
      }
    },
    openShare() {
      if (this.$store.state.vipShare) {
        this.$vux.toast.text('亲,专属课程禁止分享~')
        return false
      }
      showShare('open')
    },
    wxShare(pic, titles, descs, id) {
      // let option;
      let uri
      if (this.$store.state.vipShare) {
        uri = window.location.href + '&shareVideo=' + true + '&isVip=vip'
      } else {
        uri = window.location.href + '&shareVideo=' + true
      }
      //   option = {
      //     title: "升学在线",
      //     desc: "升学在线,上更好大学",
      //     link: process.env.workUrl + "/wx-yxk/#/home",
      //     imgUrl:
      //       "https://static.shengxue985.com/sxzx_app/logo/192x192.png"
      //   };
      // } else {
      // let uri = window.location.href + "&shareVideo=" + true;
      let option = {
        title: titles,
        desc: descs,
        link: uri,
        imgUrl: pic,
      }
      wxapi.ShareAppMessage(option)
      wxapi.ShareTimeline(option)
    },
    info() {
      this.$loading('open')
      let obj = {
        id: this.commonJs.GetUrlParam('id'),
      }
      info(obj)
        .then((res) => {
          this.bgStyle = 'background:url(' + res.data.commodityInfoByCidVO.pic + ') no-repeat;background-size:100% 100%'
          this.shareImg = res.data.commodityInfoByCidVO.pic
          this.video = res.data.lessonsVOList
          this.playerOptions.poster = res.data.commodityInfoByCidVO.pic
          if (this.commonJs.GetUrlParam('order')) {
            this.currentIndex = this.commonJs.GetUrlParam('order') * 1
          } else {
            this.currentIndex = 0
          }
          this.lessonsVOList = res.data.lessonsVOList
          this.videoSrc = this.video[this.currentIndex].videoUrl
          this.playerOptions.sources[0].src = this.video[this.currentIndex].videoUrl
          this.sharetitle = '邀您观看升学在线视频公开课'
          this.wxShare(this.shareImg, this.sharetitle, this.video[this.currentIndex].lessonTopic)
          this.showPage = true
          this.$hideLoading()
        })
        .catch((err) => {
          this.$hideLoading()
        })
    },
    getVideoData() {
      let playData = JSON.parse(sessionStorage.getItem('videoPlayList'))
      this.bgStyle = 'background:url(' + playData.coverImg + ') no-repeat;background-size:100% 100%'
      this.video = playData.viodeList
      this.currentIndex = playData.order
      this.lessonsVOList = playData.viodeList
      this.videoSrc = this.video[this.currentIndex].videoUrl
      this.playerOptions.sources[0].src = this.video[this.currentIndex].videoUrl
    },
    playVideo(index) {
      this.currentIndex = index
      this.videoSrc = this.video[this.currentIndex].videoUrl
      this.playerOptions.sources[0].src = this.video[index].videoUrl
      this.playerOptions.autoplay = true
      // v3.autoplay="autoplay"
      this.videoPlay = true

      this.wxShare(this.shareImg, this.sharetitle, this.video[this.currentIndex].lessonTopic)
    },
  },
}
</script>

<style scoped lang="less">
.videoArea {
  position: relative;
  .controlBtn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 15%;
    img {
      width: 1.88rem;
      height: 1.88rem;
    }
  }
}
.main {
  width: 100%;
  height: 100vh;
  font-size: 0.3rem;
}
.video-play {
  width: 100%;
  height: 4.2rem;
  overflow: hidden;
  position: relative;
  .right {
    position: absolute;
    width: 0.4rem;
    height: 0.4rem;
    left: 0.2rem;
    top: 0.2rem;
    background: url('~@/static/sprite/icon_sprites_40.png') -0.7rem -0.1rem;
    background-size: 3rem 2.4rem;
  }
}
/deep/.vjs-poster {
  background-size: 100% 100%;
}
.video-player {
  width: 100%;
  height: 4.2rem;
  overflow: hidden;
  position: relative;
}
/deep/.video-js .vjs-big-play-button {
  width: 2em;
  border-radius: 50%;
}
/deep/.vjs-custom-skin > .video-js .vjs-big-play-button {
  margin-left: -1em;
}
.video-play-wrapper {
  width: 100%;
  height: 100vh;
  background: #fff;
}
.content {
  width: 100%;
  overflow: hidden;
  .share {
    width: 100%;
    height: 1rem;
    background: rgba(247, 247, 250, 1);
    padding: 0 0.3rem;
    box-sizing: border-box;
    text-align: right;
    line-height: 1rem;
    b {
      font-size: 0.3rem;
      line-height: 0.4rem;
      color: #222;
      vertical-align: middle;
    }
    img {
      width: 0.4rem;
      height: 0.4rem;
      vertical-align: middle;
      margin-left: 0.1rem;
    }
  }
  h2 {
    display: block;
    padding-left: 0.3rem;
    height: 0.5rem;
    font-size: 0.36rem;
    font-family: 'PingFangSC-Semibold', PingFangSC;
    font-weight: 600;
    color: rgba(34, 34, 34, 1);
    line-height: 0.5rem;
    margin: 0.2rem auto;
  }
  .mulu {
    width: 6.9rem;
    padding: 0.3rem;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0.02rem 0.1rem 0px rgba(153, 153, 153, 0.2);
    border-radius: 0.1rem;
    margin: 0 auto 0.4rem;
    .title {
      display: block;
      i {
        display: inline-block;
        width: 0.4rem;
        margin-right: 0.1rem;
      }
      i,
      b {
        font-size: 0.3rem;
        font-family: 'PingFangSC-Semibold', PingFangSC;
        font-weight: 600;
        color: rgba(34, 34, 34, 1);
        line-height: 0.4rem;
      }
    }
    .colorIndex {
      i,
      b {
        color: @mainColor;
      }
    }
    .times {
      display: block;
      padding-left: 0.5rem;
      box-sizing: border-box;
      font-size: 0.26rem;
      font-family: 'SFCompactText-Regular', SFCompactText;
      font-weight: 400;
      color: rgba(199, 199, 199, 1);
      margin-top: 0.2rem;
    }
  }
}
</style>
